<template>
  <div>
    <el-dialog :visible.sync="is_show" title="补充订单" center @closed="closed">
      <div>
        <el-form :model="form" ref="supplement-form" :rules="rules">
          <el-row>
            <el-col :span="11">
              <el-form-item label="专利权人" prop="patent_user">
                <el-autocomplete
                  v-model="form.patent_user"
                  :fetch-suggestions="querySearch"
                  :trigger-on-focus="false"
                  placeholder="请输入专利权人"
                  :validate-event="false"
                ></el-autocomplete>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-form-item label="发明人姓名" prop="user_name">
                <el-input v-model="form.user_name" placeholder="请输入发明人姓名"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="身份证号" prop="id_card">
                <el-input v-model="form.id_card" placeholder="请输入身份证号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-form-item label="联络人" prop="liaisons">
                <el-input v-model="form.liaisons" placeholder="请输入联络人"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="联络人邮箱" prop="liaisons_email">
                <el-input v-model="form.liaisons_email" placeholder="请输入联络人邮箱"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-form-item label="联络人电话" prop="liaisons_tel">
                <el-input v-model="form.liaisons_tel" placeholder="请输入联络人电话"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template slot="footer">
        <el-button @click="is_show = false" v-no-more-click:3000>取消</el-button>
        <el-button type="primary" @click="submit" v-no-more-click:3000>确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  validateName,
  validateId,
  validatePhone,
  validateEmail
} from "~/util/index";
export default {
  data() {
    return {
      is_show: false,
      form: {
        patent_user: "",
        user_name: "",
        id_card: "",
        liaisons: "",
        liaisons_email: "",
        liaisons_tel: ""
      },
      order_id: null,
      allPatent: [],
      rules: {
        user_name: [
          { required: false, validator: validateName, trigger: "blur" }
        ],
        id_card: [{ required: false, validator: validateId, trigger: "blur" }],
        liaisons_tel: [
          { required: false, validator: validatePhone, trigger: "blur" }
        ],
        liaisons_email: [
          { required: false, validator: validateEmail, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    show(data) {
      if (!data.order) {
        this.order_id = data.id
        this.is_show = true;
        this.getAllPatent()
      }
    },
    submit() {
      this.$refs["supplement-form"].validate(valid => {
        if (valid) {
          this.submitPost();
        } else {
          this.$message({
            type: "error",
            message: "校验失败，请检查填写的资料"
          });
          return false;
        }
      });
    },
    submitPost() {
      if (this.order_id) {
        this.$axios.post(`/api/finals/${this.order_id}/create/order`, this.form).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "订单补充成功"
            });
            this.$emit("refresh", this.form);
            this.is_show = false;
          }
        });
      } else {
        this.$message({
          type: "error",
          message: "该订单不允许补充。"
        });
      }
    },
    closed() {
      this.$refs['supplement-form'].resetFields()
    },
    querySearch(queryString, cb) {
      let that = this;
      let patent = this.allPatent;
      let results = [];
      if (patent.length > 0) {
        results = queryString
          ? patent.filter(that.createFilter(queryString))
          : patent;
      }
      cb(results);
    },
    createFilter(queryString) {
      return returnVal => {
        //===0代表从首个字符处匹配必须成功，>=0代表从任意字符处匹配必须成功
        return (
          returnVal.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
        );
      };
    },
    getAllPatent() {
      this.$axios.get("api/order/patent").then(res => {
        if (res.data.code == 200) {
          let arr = [];
          let arrItem = {};
          for (let i = 0; i < res.data.data.length; i++) {
            //element的模糊匹配组件el-autocomplete指定：必须数组的每个元素是个对象，并且有value属性
            let arrItem = {};
            arrItem.value = res.data.data[i];
            arr.push(arrItem);
          }
          this.allPatent = arr;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  .el-dialog__body {
    padding-bottom: 0;
    .el-cascader,
    .el-select,
    .el-autocomplete {
      width: 100%;
    }
  }
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
